<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<div th:fragment="content">
    <div class="row">
        <!-- 数据源配置 -->
        <div class="col-md-5">
            <label class="col-sm-3 control-label text-right">数据源表</label>
            <div class="col-sm-9">
                <select id="sourceTable" class="form-control select-control-table" multiple="multiple">
                    <option th:each="t,s:${mapping?.sourceConnector?.table}" th:text="${t?.name} + ' ('+${t?.type}+')'"
                            th:value="${t?.name}"/>
                </select>
            </div>
        </div>
        <!-- 中间图标 -->
        <div class="col-md-2 text-center">
            <span class="fa fa-angle-double-right fa-2x"></span>
        </div>
        <!-- 目标源配置 -->
        <div class="col-md-5">
            <div class="form-group">
                <label class="col-sm-3 control-label text-right">目标源表</label>
                <div class="col-sm-9">
                    <select id="targetTable" class="form-control select-control-table" multiple="multiple">
                        <option th:each="t,s:${mapping?.targetConnector?.table}"
                                th:text="${t?.name} + ' ('+${t?.type}+')'" th:value="${t?.name}"/>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- 数据源配置 -->
        <div class="col-md-5">
            <label class="col-sm-3 control-label text-right">标记主键<i class="fa fa-question-circle fa_gray" aria-hidden="true" title="数据源表/视图没有主键，自定义一个或多个主键"></i></label>
            <div class="col-sm-9">
                <input id="sourceTablePK" class="form-control" type="text" data-role="tagsinput"/>
            </div>
        </div>
        <!-- 中间图标 -->
        <div class="col-md-2 text-center">
            <span class="fa fa-angle-double-right fa-2x"></span>
        </div>
        <!-- 目标源配置 -->
        <div class="col-md-5">
            <div class="form-group">
                <label class="col-sm-3 control-label text-right">标记主键<i class="fa fa-question-circle fa_gray" aria-hidden="true" title="目标源表/视图没有主键，自定义一个或多个主键"></i></label>
                <div class="col-sm-9">
                    <input id="targetTablePK" class="form-control" type="text" data-role="tagsinput" />
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-md-2">&nbsp;
                <button id="refreshTableBtn" type="button" class="btn btn-default" th:title="刷新数据源和目标源表" th:tableGroupId="${mapping?.id}">
                    <span class="fa fa-refresh"></span>刷新表
                </button>
            </div>
            <div class="col-md-8"></div>
            <div class="col-md-2 text-right">
                <button id="tableGroupDelBtn" th:mappingId="${mapping?.id}" type="button" class="btn btn-default" disabled="disabled">
                    <span class="fa fa-remove"></span>删除
                </button>
                <button id="tableGroupAddBtn" th:mappingId="${mapping?.id}" type="button" class="btn btn-primary">
                    <span class="fa fa-plus"></span>添加
                </button>&nbsp;
            </div>
        </div>
    </div>

    <div class="form-group">
        <table th:if="${tableGroups.size() gt 0}" class="table table-hover">
            <thead>
            <tr>
                <th>数据源表</th>
                <th>目标源表</th>
                <th><input type="checkbox" class="tableGroupCheckboxAll" /></th>
            </tr>
            </thead>
            <tbody id="tableGroupList">
                <tr th:id="${t?.id}" title='点击编辑' class='dbsyncer_pointer' th:each="t,state : ${tableGroups}">
                    <td th:text="${t?.sourceTable.name}"/>
                    <td th:text="${t?.targetTable.name}"/>
                    <td><input th:value="${t?.id}" th:mappingId="${mapping?.id}" type="checkbox" class="tableGroupCheckbox" /></td>
                </tr>
            </tbody>
        </table>
        <input id="sortedTableGroupIds" name="sortedTableGroupIds" type="hidden" />
    </div>
</div>

</html>